<template>
  <div>
    <a-modal
      :cancelText="$t('cloudpivot.list.pc.Cancel')"
      :maskClosable="false"
      :okText="$t('cloudpivot.list.pc.startExport')"
      :width="866"
      @cancel="closeModel"
      centered
      v-model="showModal"
      wrapClassName="data-export">
      <template slot="title">
        <h3 class="modal-title">{{ $t("cloudpivot.list.pc.exportData") }}</h3>
      </template>
      <div class="data-box">
        <div class="data-left">
          <div class="data-left-top">
            <div class="check-all">
              <a-checkbox
                :checked="isCheckedAll"
                @click="selectAll"
                class="checkbox"
              ></a-checkbox>
              <span class="left">{{ $t("cloudpivot.list.pc.checkAll1") }}</span>
            </div>
            <div class="data-left-search">
              <a-input-search
                :placeholder="$t('cloudpivot.list.pc.placeInputSearch')"
                v-model="field"
                @search="onSearch('field')"
                allowClear
              />
            </div>
          </div>
          <div class="data-left-list">
            <div class="data-list">
              <div class="data-list-sub-title">{{ $t("cloudpivot.list.pc.mainTableField") }}</div>
              <div class="sub-check-all">
                <a-checkbox
                  class="checkbox"
                  :checked="mainDataSelected"
                  @click="onSelectChange(mainDataItemList, 'main')"
                >
                </a-checkbox>
                <span class="left">{{ $t("cloudpivot.list.pc.checkAll") }}</span>
              </div>
              <div
                :key="index"
                class="check-item"
                v-for="(i, index) in filterMainData"
              >
                <a-checkbox
                  :checked="i.selected"
                  @click="onSelectChange(i)"
                  class="checkbox"
                ></a-checkbox>
                <span class="left">{{ i.name }}</span>
              </div>

              <!-- 子表数据项 -->
              <div
                :key="data.code"
                class="sub-item"
                v-for="data in filterChildDataItemList"
              >
                <div class="data-list-sub-title">{{ data.name }}</div>
                <div class="sub-check-all">
                  <a-checkbox
                    :checked="data.selected"
                    @click="onSubSelectChange(data)"
                    class="checkbox"
                  ></a-checkbox>
                  <span class="left">{{ $t("cloudpivot.list.pc.checkAll") }}</span>
                </div>
                <div class="sub-item-content">

                  <div
                    :key="sub.code"
                    class="sub-item-child"
                    v-for="sub in data.subSchema.properties"
                    v-if="
                      !sub.defaultProperty &&
                      !dataItemTypeArr.includes(sub.propertyType) &&
                      sub.published && !field">
                    <a-checkbox
                      :checked="sub.selected"
                      @click="onSubItemSelectChange(data, sub)"
                      class="checkbox"
                    ></a-checkbox>
                    <span class="left">{{ sub.name }}</span>
                  </div>
                    <div
                    :key="sub.code"
                    class="sub-item-child"
                    v-for="sub in data.subSchema.tempList"
                    v-if="
                      !sub.defaultProperty &&
                      !dataItemTypeArr.includes(sub.propertyType) &&
                      sub.published && field">
                    <a-checkbox
                      :checked="sub.selected"
                      @click="onSubItemSelectChange(data, sub)"
                      class="checkbox"
                    ></a-checkbox>
                    <span class="left">{{ sub.name }}</span>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="data-right">
          <div class="data-right-title">
            {{ $t("cloudpivot.list.pc.selectedField") }}：
            <span>
              {{ $t("cloudpivot.list.pc.numbers",{num: mainSelecteLength + childSelecteLength}) }}
            </span>
          </div>
          <div class="checked-item-search">
            <a-input-search
              :placeholder="$t('cloudpivot.list.pc.placeInputSearch')"
              @search="onSearch('choose')"
              v-model="choose"
              allowClear
            />
          </div>

          <div class="data-right-items">
            <div
              class="data-right-list"
              v-for="(item, index) in filterMainData2"
              :key="index"
            >
              <div class="data-right-li" v-if="item.selected">
                <span :title="item.name">{{ item.name }}</span>
                <i
                  class="icon aufontAll h-icon-all-close"
                  @click="deleteList(item)"
                ></i>
              </div>
            </div>

            <div class="data-right-list">
              <div
                class="data-right-li1"
                v-for="data in filterChildDataItemList2"
                :key="data.code"
              >
                <template
                  v-for="sub in data.subSchema.properties"
                >
                  <div
                    v-if="
                        !sub.defaultProperty &&
                        !dataItemTypeArr.includes(sub.propertyType) &&
                        sub.published && !choose && sub.selected"
                    :key="sub.code"
                    :class="!sub.defaultProperty &&
                        !dataItemTypeArr.includes(sub.propertyType) &&
                        sub.published &&
                        sub.selected?'data-right-li':''">
                      <span>{{ sub.name }}</span>
                      <i
                        class="icon aufontAll h-icon-all-close"
                        @click="deleteList(sub, data)"
                      ></i>
                  </div>
                </template>
                <template
                  v-for="sub in data.subSchema.tempList"
                >
                  <div
                    v-if="
                        !sub.defaultProperty &&
                        !dataItemTypeArr.includes(sub.propertyType) &&
                        sub.published && choose && sub.selected"
                    :key="sub.code"
                    :class="!sub.defaultProperty &&
                        !dataItemTypeArr.includes(sub.propertyType) &&
                        sub.published &&
                        sub.selected?'data-right-li':''">
                      <span>{{ sub.name }}</span>
                      <i
                        class="icon aufontAll h-icon-all-close"
                        @click="deleteList(sub, data)"
                      ></i>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="h3-organization-footer" slot="footer">
        <div>
          <a-button @click="closeModel" type="default">{{
            $t("cloudpivot.list.pc.Cancel")
          }}</a-button>
          <a-button @click="submit" type="primary">{{
            $t("cloudpivot.list.pc.export")
          }}</a-button>
        </div>
        <div @click="handleShowList" class="import-text">{{ $t("cloudpivot.list.pc.exportRecord") }}</div>
      </div>
    </a-modal>

    <a-modal
      :maskClosable="false"
      :width="777"
      @cancel="handleCloseUpload"
      :title="$t('cloudpivot.list.pc.exporting')"
      centered
      v-model="showUpload"
      wrapClassName="data-export-ing"
    >
      <div class="data-export-box">
        <div class="data-export-undone" v-if="currentTaskData.name">
          <h2>{{ $t("cloudpivot.list.pc.unfinished") }}</h2>
            <div class="data-export-li">
            <div class="left">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#h-icon-all-excel1"></use>
              </svg>
              <div class="data-export-tex">
                <h4>{{currentTaskData.name}}</h4>
                <span class="size">{{currentTaskData.size || '--'}}</span>
              </div>
            </div>
            <div class="right">
              <a-progress v-if="currentTaskData.status!=='fail'" type="circle" stroke-color="#2970FF" :percent="percent" :width="48" />
              <template v-else>
                <i class="icon aufontAll h-icon-all-reload-o" :title="$t('cloudpivot.list.pc.reExport')" @click="submit()"></i>
              </template>
            </div>
          </div>
        </div>
     
        <div class="data-export-complete">
          <h2>{{ $t("cloudpivot.list.pc.finished") }}</h2>
          <div class="data-export-li" v-for="(item,index) in exportTaskLists" :key="index">
            <div class="left">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#h-icon-all-excel1"></use>
              </svg>
              <div class="data-export-tex">
                <h4>{{item.refId || '--'}}</h4>
                <span class="size">{{item.fileSize || '--'}}</span>
              </div>
            </div>
            <div class="right">
              <i class="icon aufontAll h-icon-all-delete-o1" :title="$t('cloudpivot.list.pc.Delete')" @click="deleteRecord(item.id)"></i>
              <i class="icon aufontAll h-icon-all-download" :title="$t('cloudpivot.list.pc.download')" @click="downLoadExportFile(item.id)"></i>
            </div>
          </div>
        </div>
      </div>

      <div class="h3-organization-footer" slot="footer">
        <div>
          <a-button @click="showUpload=false" type="primary" v-if="!currentTaskData.name">{{
            $t("cloudpivot.list.pc.complete")
          }}</a-button>
        </div>
        <div @click="handleShowList" class="import-text">{{ $t("cloudpivot.list.pc.exportRecord") }}</div>
      </div>

      <!-- <div class="uploading-content">
        <img src="./model-table-import/import-status.svg" />
        <div>文件正在生成中，请稍候...</div>
        <div>
          关闭弹窗后不会自动下载，需前往<a
            @click="handleShowList"
            style="text-decoration: underline"
            >导出任务列表</a
          >手动下载文件
        </div>
      </div> -->
    </a-modal>
    <a-modal
      :cancelText="$t('cloudpivot.list.pc.Cancel')"
      :maskClosable="false"
      :okText="$t('cloudpivot.list.pc.OK')"
      :width="850"
      @cancel="closeModelList"
      @ok="closeModelList"
      :title="$t('cloudpivot.list.pc.exportRecord')"
      :zIndex="2000"
      centered
      v-model="showList"
      :footer="null"
    >
      <export-task-list
        :showList="showList"
        @downLoadExportFile="downLoadExportFile"
      />
    </a-modal>
  </div>
</template>

<script lang="ts">
import { Checkbox, Icon, Modal, notification } from "@h3/antd-vue";
import { ConfigType } from "@h3/antd-vue/types/message";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { namespace } from "vuex-class";
import { listApi } from "../../../../../api";
import ExportTaskList from "./exportTaskList.vue";
import MessageExport from "./messageExport.vue";




const WorkflowCenterModule = namespace("WorkflowCenter/WorkflowCenter");

@Component({
  name: "data-export",
  components: {
    AModal: Modal,
    ACheckbox: Checkbox,
    AIcon: Icon,
    ExportTaskList,
  },
})
export default class DataExport extends Vue {
  @WorkflowCenterModule.State("applicationPageTitle") applicationPageTitle: any;

  @WorkflowCenterModule.State("dataItemList") dataItemList: any;

  @WorkflowCenterModule.Mutation("setImportIcon") setImportIcon: any;

  @Prop() value!: boolean;

  @Prop() queryColumns!: any;

  @Prop() exportFileId!: string;

  @Prop() extend1!: string;
  
  @Prop({default:'import'}) type!: string;

  showModal: boolean = false; // 弹窗显隐

  checkAll: boolean = false; // 全选按钮

  dataItemTypeArr: any = [6, 7];

  mainDataItemList: any = []; // 主表数据项列表（除子表外）

  childDataItemList: any = []; // 子表数据项列表

  interval: any = null;

  showUpload: boolean = false;

  showList: boolean = false;

  isComplete: boolean = false;

  chooseList: any[] = []; //已选择数据


  field: string = ""; //关键字

  choose: string = "";

  mainList: any[] = []; //右侧总列表数据

  percent:number = 30;
  subData:any[] = [];
  exportTaskLists:any[] = [];//导出列表
  currentTaskData:any = {
    name:'',
    size:'',
    status:'',
  }; //开始导出数据

  get mainDataSelected() {
    return this.mainDataItemList.every((item) => item.selected);
  }

  get mainSelecteLength(){
    return this.mainDataItemList.filter((item) => item.selected).length;
  }

  get childSelecteLength(){
     return this.subData.length;
  }
  
  get filterMainData(){
     return this.mainDataItemList.filter(item=>item.name.includes(this.field));
  }

  get filterMainData2(){
     return this.mainDataItemList.filter(item=>item.name.includes(this.choose));
  }

  get filterChildDataItemList(){
    if(!this.field){
      return this.childDataItemList;
    }
    return this.childDataItemList.map(item=>{
      if(item.subSchema && item.subSchema && item.subSchema.properties){
        item.subSchema.tempList =  item.subSchema.properties.filter(el=>el.name.includes(this.field))
        return item;
      }
    });
  }

  get filterChildDataItemList2(){
    if(!this.choose){
      return this.childDataItemList;
    }
    return this.childDataItemList.map(item=>{
      if(item.subSchema && item.subSchema && item.subSchema.properties){
        item.subSchema.tempList =  item.subSchema.properties.filter(el=>el.name.includes(this.choose))
        return item;
      }
    });
  }

  mounted (){
    // this.simulation();
  }
  
  /**
   * 删除
   */
  async deleteRecord(id){
     const res=  await listApi.deleteExportTaskList({id:id})
     const vm = this;
        if (res.errcode === 0) {
          this.$message.success(vm.$t('cloudpivot.list.pc.DeleteSuccess') as ConfigType);
            this.getTaskList();
        }else{
          (this as any).$message.error(res.errmsg);
        }
  }

  /**
   * 模拟下载进度
   */
  timer:any= null;
  simulation(){
    this.timer=setInterval(()=>{
        this.percent+=5;
        if(this.percent>=100){
          clearInterval(this.timer);
        }
    },500)
  }


  /**
   * 删除
   */
  deleteList(item, data?) {
    this.$set(item, "selected", false);
    if (data) {
      this.$set(data, "selected", false);
      this.subData = this.subData.filter(el=>el.id!== item.id);
    }
  }

  /**
   * 搜索功能
   */
  rightData: any = {
    mainData: [],
    subData: [],
  };
  onSearch(type) {
    if (type === "field") {
      //左侧搜索
    } else {
      //右侧搜索
      // this.rightData.mainData = this.mainDataItemList.filter(
      //   (item) => item.name.includes(this.choose) && item.selected
      // );
      // this.childDataItemList.forEach((item) => {
      //   item.subSchema.properties.forEach((el) => {
      //     if (
      //       !el.defaultProperty &&
      //       !this.dataItemTypeArr.includes(el.propertyType) &&
      //       el.published &&
      //       el.selected &&
      //       el.name.includes(this.choose)
      //     ) {
      //       this.rightData.subData.push(el);
      //     }
      //   });
      // });
    }
  }

  handleCloseUpload() {
    this.setImportIcon(true);
    if (!this.isComplete) {
      
      // notification.destroy();
      // this.$emit("change", false);
      // const config: any = {
      //   message: "文件生成中，请稍候...",
      //   description: "",
      //   duration: 0,
      //   closeIcon: (h) => {
      //     return h("span");
      //   },
      //   icon: (h) => {
      //     return h("a-icon", {
      //       props: {
      //         type: "loading",
      //       },
      //     });
      //   },
      //   class: "export-notification-loading",
      //   placement: "bottomLeft",
      // };
      // notification.open(config);
    }
  }


  getTimer:any = null;
  async getExportProgress() {
    this.simulation();
    const vm = this
    const res = await listApi.getExportingProgress({ id: this.exportFileId });
    if (res.errcode === 0) {
      this.currentTaskData = {
        name:res.data.refId,
        size:res.data.fileSize,
        status:res.data.taskStatus,
      }

      if (res.data.exportResultStatus) {
        this.isComplete = true;
        if (!this.showUpload) {
          notification.destroy();
          const h: any = this.$createElement;
          let content = h(MessageExport, {
            props: {},
            on: {
              handleUpload: () => {
                this.showList = true;
              },
            },
          });
          notification["success"]({
            message: content,
            description: "",
            duration: 5,
            class: "export-notification",
            placement: "bottomLeft",
            onClose: () => {
              notification.destroy();
            },
          });
        }
        clearInterval(this.interval);
        this.downLoadExportFile();
        if(this.timer){
          this.percent = 100;
          clearInterval(this.timer);
        }
        
        setTimeout(()=>{
          clearInterval(this.getTimer);
          this.currentTaskData = {
              name:'',
              size:'',
              status:'',
          };
          this.percent = 0;
          this.getTaskList();
        },1500);
      }else{ //还未下载完毕，继续轮训请求
        if(this.getTimer){
          this.getTimer = null;
          return;
        }
       this.getTimer =  setTimeout(()=>{
          this.getExportProgress();
         },2500)
      }

    } else {
      this.isComplete = true;
      if (!this.showUpload) {
        notification.destroy();
        notification["error"]({
          message: vm.$t('cloudpivot.list.pc.GenerationFailed') as string,
          description: "",
          duration: 3,
          class: "export-notification",
          placement: "bottomLeft",
          onClose: () => {
            notification.destroy();
          },
        });
      } else {
        // this.showUpload = false;
      }
      clearInterval(this.interval);
       if(this.timer){
         clearInterval(this.timer);
         this.currentTaskData = {
           name:'400fc67d-5103-405a-9969-89d760dae9a4.xlsx',
           size:'--',
           status:'fail',
         }
       }
      // this.$message.error(res.errmsg as string);
    }
  }

  destroyed() {
    clearInterval(this.interval);
  }

  async downLoadExportFile(id?: string) {
    const res: any = await listApi.getExportFile({
      id: id ? id : this.exportFileId,
    });
    const blob = new Blob([res], {
      type: "application/vnd.ms-excel;charset=UTF-8",
    });
    const date = new Date();
    const mounth =
      date.getMonth() > 8 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`;
    const days = date.getDate() > 9 ? date.getDate() : `0${date.getDate()}`;
    const hours = date.getHours() > 9 ? date.getHours() : `0${date.getHours()}`;
    const minutes =
      date.getMinutes() > 9 ? date.getMinutes() : `0${date.getMinutes()}`;
    const seconds =
      date.getSeconds() > 9 ? date.getSeconds() : `0${date.getSeconds()}`;

    const stamp = `${date.getFullYear()}${mounth}${days}${hours}${minutes}${seconds}`;
    const fileName = `${this.applicationPageTitle}导出${stamp}.xlsx`;

    if (window.navigator.msSaveOrOpenBlob) {
      navigator.msSaveBlob(blob, fileName);
    } else {
      const a = document.createElement("a");
      const url = URL.createObjectURL(blob);
      a.download = fileName;
      a.href = url;
      a.click();
      URL.revokeObjectURL(url);
    }
    this.$message.destroy();
  }

  // 初始化数据列表
  dataMounted(queryColumns: any) {
    if (this.dataItemList) {
      const copyList = JSON.parse(JSON.stringify(this.dataItemList));
      this.mainDataItemList = copyList.filter(
        (data: any) =>
          data.code !== "ownerDeptQueryCode" &&
          data.propertyType !== 8 &&
          !this.dataItemTypeArr.includes(data.propertyType)
      );
      this.childDataItemList = copyList.filter(
        (data: any) => data.propertyType === 8
      );

    }
    if (Array.isArray(queryColumns)) {
      this.subData = [];
      queryColumns.forEach((c: any) => {
        this.mainDataItemList.forEach((l: any) => {
          if (c.propertyCode === l.code) {
            this.$set(l, "selected", true);
          }
        });
        this.childDataItemList.forEach((d: any) => {
          if (c.propertyCode === d.code) {
            this.$set(d, "selected", true);
            d.subSchema.properties.forEach((s) => {
              this.$set(s, "selected", true);
              if(s.selected && !s.defaultProperty &&
                    !this.dataItemTypeArr.includes(s.propertyType) &&
                    s.published){
                 this.subData.push(s);
              }
            });
          }
        });
      });
    }
  }

  

  // 主表数据项change
  // onSelectChange(data?: any) {
  //   const dataItemArray = this.mainDataItemList.concat(this.childDataItemList);
  //   dataItemArray.some((d: any, l: number) => {
  //     if (!d.selected) {
  //       this.checkAll = false;
  //       return true;
  //     } else if (d.selected && l === dataItemArray.length - 1) {
  //       this.checkAll = true;
  //       return true;
  //     }
  //     return false;
  //   });
  // }

  onSelectChange(item: any, type?: string) {
    if (type === "main") {
      const flag = this.mainDataSelected;
      this.mainDataItemList.forEach((el) => {
        this.$set(el, "selected", !flag);
      });
      return;
    }
    this.$set(item, "selected", !item.selected);
  }

  // 子表数据项change
  onSubItemSelectChange(subTable: any, subTableItem: any) {
    let flag = !subTableItem.selected;
    this.$set(subTableItem, "selected", flag);

    const subItemList = (
      Array.isArray(subTable.subSchema.properties)
        ? subTable.subSchema.properties
        : []
    ).filter(
      (sub: any) =>
        !sub.defaultProperty && !this.dataItemTypeArr.includes(sub.propertyType)
    );

    this.$set(
      subTable,
      "selected",
      subItemList.every((sitem: any) => sitem.selected)
    );
    
    if(flag){
      this.subData.push(subTableItem);
    }else{
      this.subData = this.subData.filter(el=>el.id !== subTableItem.id);
    }
  }

  // 子表change
  onSubSelectChange(data: any) {
    let flag = !data.selected;
    this.$set(data, "selected", flag);

    if (Array.isArray(data.subSchema.properties)) {
      data.subSchema.properties.forEach((d: any) => {
        this.$set(d, "selected", flag);
        if(!d.defaultProperty &&
                    !this.dataItemTypeArr.includes(d.propertyType) &&
          d.published){
            if(flag){
              this.subData.push(d);
            }else{
              this.subData = this.subData.filter(el=>el.id !== d.id);
            }
        }
      });
    }
  }

  get isCheckedAll() {
    return (
      this.mainDataItemList.every((item: any) => item.selected) &&
      this.childDataItemList.every((item: any) => item.selected)
    );
    //
    // item.selected && item.subSchema.properties.every((prop:any)=>prop.selected)
    // ));
  }

  // 全选
  selectAll(e: any) {
    let flag = !this.isCheckedAll;
    this.mainDataItemList.forEach((item: any) => {
      this.$set(item, "selected", flag);
    });
    this.childDataItemList.forEach((item: any) => {
      this.$set(item, "selected", flag);
      if (Array.isArray(item.subSchema.properties)) {
        item.subSchema.properties.forEach((d: any) => {
          this.$set(d, "selected", flag);
          if(flag){//添加
             this.subData.push(d);
          }else{//删除
             this.subData = this.subData.filter(el=>el.id !== d.id);
          }

        });
      }
    });
  }

  // 展开收缩子表数据项
  toggle(data: any) {
    const collapsed = !data.collapsed;
    this.$set(data, "collapsed", collapsed);
  }

  /**
   * 根据展示字段顺序，对导出字段排序
   */
  sortProperty(targetList: Array<any>) {
    // console.log('targetList', targetList);
    // 获取本地缓存的列表列
    const { schemaCode } = this.$route.params;
    const columnsOptsKey: string = `${schemaCode}_columns_options`;
    const columnOpts: any = window.localStorage.getItem(columnsOptsKey);
    let sortedCodes: Array<string> = [];

    if (columnOpts) {
      const _column: any = JSON.parse(columnOpts);
      sortedCodes = _column
        .filter((col: any) => col.isShow)
        .map((col: any) => col.key);
    } else if (Array.isArray(this.queryColumns)) {
      // 无本地缓存时根据展示字段排序
      sortedCodes = this.queryColumns.map((c: any) => c.propertyCode);
    }

    if (sortedCodes.length) {
      let resultList: Array<any> = [];
      sortedCodes.forEach((code: string) => {
        const item: any = targetList.find(
          (li: any) => li.propertyCode === code
        );
        if (item) {
          resultList.push(item);
        }
      });
      const tailList: any = targetList.filter(
        (item: any) => !sortedCodes.includes(item.propertyCode)
      );
      resultList.push(...tailList);
      return resultList;
    }

    return targetList;
  }

  // 获取导出字段displayFormat
  getDataDisplayFormat(data: any) {
    if (Array.isArray(this.queryColumns)) {
      data = data.map((d: any) => {
        const item = this.queryColumns.find(
          (c: any) => c.propertyCode === d.propertyCode
        );
        if (item) {
          d.displayFormat = item.displayFormat;
        } else {
          d.displayFormat = null;
        }
        return d;
      });
    }
    return data;
  }
  //获取已完成列表
  async getTaskList(){
      const params = {
        page: 0,
        size: 10
      };
      const res = await listApi.getExportTaskList(params);
      if (res.errcode === 0) {
        this.exportTaskLists = res.data.content;
       
       this.exportTaskLists.forEach(item=>{
         item.fileSize = this.getFileSize(item.fileSize);
       })
        
        
      }
  }

    getFileSize(fileSize){
       let temp:number = 0;
       let unit:string = 'kb';
        if(fileSize < Math.pow(1024,2)){
            temp = fileSize / 1024;
            unit = 'KB';
        }else if(fileSize < Math.pow(1024,3)){
           temp = fileSize / Math.pow(1024,2)
           unit = 'MB';
        }else if(fileSize < Math.pow(1024,4)){
           temp = fileSize / Math.pow(1024,3)
           unit = 'GB';
        }
        
        if(temp){
           return temp.toFixed(2) + unit;
        }else{
          return temp;
        }
    }

  // 导出数据
  submit() {
    this.getTaskList();
    const vm = this
    const copyArray = JSON.parse(JSON.stringify(this.childDataItemList));
    copyArray.forEach((child: any) => {
      if (Array.isArray(child.subSchema.properties)) {
        const subItemList = child.subSchema.properties.filter(
          (sub: any) =>
            !sub.defaultProperty &&
            !this.dataItemTypeArr.includes(sub.propertyType) &&
            sub.selected
        );
        if (subItemList.length) {
          child.selected = true;
        }
        child.subSchema.properties = subItemList.map((sub: any) => {
          const back = {
            propertyCode: sub.code,
            name: sub.name,
            propertyType: sub.propertyType,
          };
          return back;
        });
      }
    });
    const dataArray = this.mainDataItemList
      .concat(copyArray)
      .filter((d: any) => d.selected);
    let returnData = dataArray.map((data: any) => {
      const back = {
        propertyCode: data.code,
        name: data.name,
        propertyType: data.propertyType,
        childColumns: data.subSchema
          ? data.subSchema.properties
          : data.subSchema,
      };
      return back;
    });
    returnData = this.getDataDisplayFormat(returnData);
    // returnData = this.sortProperty(returnData);
    console.log("exportdata", returnData);
    //导出未完成初始状态
    this.percent = 30
    this.currentTaskData = {
      name: vm.$t('cloudpivot.list.pc.FileIsBeingExported') + '...',
      size:'--',
      status:'progress',
    }
    this.showUpload = true;
    this.$emit("exportEnd", returnData);
    this.interval = setInterval(() => {
      this.getExportProgress();
    }, 2000);
    //设置定时任务5分钟;
    // if (this.interval) {
    //   setTimeout(() => {
    //     clearInterval(this.interval);
    //     this.$message.error("连接超时");
    //   }, 300000);
    // }

    // this.closeModel();
  }

  handleShowList() {
    // this.showUpload = false;
    this.showList = true;
  }

  closeModelList() {
    
    this.showList = false;
  }

  closeModel() {
    this.$emit("input", false);
  }

  @Watch("value")
  onValueChange(v: boolean) {
    this.showModal = v;
    if(this.type === 'showList'){
        this.showModal = false;
        this.showList = true;
    }
    this.dataMounted(this.queryColumns);
  }

  @Watch("queryColumns", { deep: true, immediate: true })
  onColumnChange(v: any) {
    this.dataMounted(v);
  }

  @Watch("extend1")
  ext(val: any) {
    console.log("extend1", val);
    if (val === "true") {
      this.dataItemTypeArr = [7];
      this.dataMounted(this.queryColumns);
    }
  }
}
</script>
<style lang="less">
@import './../../../../../application/src/components/pc/style/custom-themes';
.export-notification,
.export-notification-loading {
  padding: 8px 10px;
  /*width: 250px;*/
  max-width: 400px;
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;

  .ant-notification-notice-description {
    display: none;
  }

  .ant-notification-notice-icon {
    font-size: 14px;
    line-height: 28px;
  }

  .ant-notification-close-icon {
    font-size: 12px;
    color: #ffffff;
  }

  .ant-notification-notice-close {
    line-height: 12px;
    top: 13px;
    right: 12px;
  }

  .ant-notification-notice-message {
    font-size: 14px;
    word-break: break-all;
    color: #ffffff;
    margin-bottom: 0;
    margin-left: 24px;
  }
}

.export-notification-loading {
  /*width: 140px;*/
  max-width: 300px;

  .anticon-loading {
    color: #2970ff;
  }

  .ant-notification-notice-message {
    line-height: 28px;
  }

  .ant-notification-notice-close {
    display: none;
  }

  .ant-notification-close-x {
    display: none;
  }
}

.ant-modal-close-x{
  svg{
      display: none;
  }
  height: 54px;
  width: 54px;
  line-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  &:hover{
    i{
      color: @highlightColor;
    }
  }
  i{
      display: inline-block;
      width: 16px;
      height: 16px;
      font-family: "aufontAll" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      color: rgba(17, 18, 24, 0.5);
      display: flex;
      align-items: center;
      &::after{
          content: "\e996";
      }
  }

}
.ant-modal-header {
    border-bottom: none;
    .ant-modal-title{
        font-weight: 700;
        color: #111218;
        font-size: 16px;
    }
}
.ant-modal-footer{
    border-top: none;
    padding: 0 24px 24px;
}
.ant-modal-body{
    padding-top: 8px;
}

.ant-table-header-column {
  font-size: 13px;
  font-weight: 600;
  color: #111218;
  line-height: 22px;
}

.text-ellipsis, .ant-table-row-cell-break-word {
  font-size: 13px;
  font-weight: 400;
  color: #111218;
  line-height: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ant-table-header.ant-table-hide-scrollbar {
    overflow: hidden !important;
  }

.ant-table-row-cell-break-word {
  padding: 7px 12px !important;
}
.ant-table-body {
  overflow-y: auto !important;
}

.ant-table-header.ant-table-hide-scrollbar {
  margin-bottom: unset !important;
  height: 36px !important;
  min-height: 36px !important;
}

.data-export {
  .ant-modal-body {
    // max-height: 378px;
    // overflow-y: auto;
    padding: 24px 20px;
    margin: 0 4px;
  }

  .uploading-content {
    text-align: center;
    margin-bottom: 80px;

    img {
      padding: 30px;
    }

    div {
      margin-bottom: 10px;
    }
  }

  .modal-title {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: #111218;
    margin-bottom: 0;
  }

  .gray {
    font-size: 12px;
    margin-left: 8px;
    color: rgba(0, 0, 0, 0.45);
  }

  .left {
    color: #111218;
    font-size: 14px;
    margin-left: 8px;
    line-height: 22px;
  }

  .data-list {
    overflow: hidden;

    .span {
      color: rgba(0, 0, 0, 0.85);
    }

    .check-item {
      float: left;
      width: calc(25% - 4px);
      min-width: 127px;
      margin-right: 4px;
      margin-top: 14px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .sub-item {
      width: 100%;
      margin-top: 16px;
      float: left;

      .sub-title {
        font-size: 14px;
        font-weight: 400;
        color: #111218;
        margin-left: 5px;
      }

      .line {
        background: #e8e8e8;
        width: 100%;
        height: 1px;
        margin-top: 8px;
      }

      .toggle {
        float: right;
        margin-right: 14px;
        cursor: pointer;
        color: rgba(0, 0, 0, 0.45);

        & > i {
          transform: rotate(180deg);
        }

        & > i.collapsed {
          transform: rotate(0);
        }
      }

      .sub-item-child {
        float: left;
        width: 33%;
        margin-top: 14px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }

  .ant-modal-footer {
    border-top: none;
    padding-top: 0;
  }
  .ant-btn {
    width: 80px;
    height: 32px;
  }
  .import-text {
    font-size: 14px;
    font-weight: 400;
    color: @highlightColor;
    cursor: pointer;
  }

  .data-right {
    width: 244px;
    height: 100%;
  }

  /**
    新版导出样式
  */
  .data-box {
    width: 100%;
    border-radius: 2px;
    border: 1px solid #dddddd;
    display: flex;
    max-height: 548px;
    height: calc(100vh - 248px);
    overflow-x: auto;
    > .data-left {
      flex: 1;
      height: 100%;
      // min-height: 378px;
      // max-height: calc(100vh - 300px);
      min-width: 400px;
      // overflow-y: scroll;
      padding: 16px 0px 32px ;
      .data-left-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px dashed #eeeeee;
        margin: 0 16px;
        padding-bottom: 16px;
        .check-all {
          .left {
            margin-left: 8px;
            font-size: 14px;
            font-weight: 700;
            color: #111218;
          }
        }
        .data-left-search {
          width: 240px;
          height: 32px;
        }
      }

      .data-left-list{
        padding: 0 10px 0 16px;
        overflow-y: scroll;
        height: calc(100% - 49px);
      }

      .data-list {
        padding-left: 13px;
        .data-list-sub-title {
          font-size: 14px;
          font-weight: 700;
          color: #111218;
          position: relative;
          margin-top: 23px;
          &::before {
            content: "";
            left: -13px;
            top: 6px;
            width: 3px;
            height: 10px;
            background-color: @highlightColor;
            position: absolute;
          }
        }
        .sub-check-all {
          margin-top: 13px;
          .left {
            margin-left: 8px;
            font-size: 14px;
            color: #111218;
            font-weight: 400;
          }
        }
      }
    }
    > .data-right {
      width: 244px;
      height: 100%;
      // min-height: 378px;
      // max-height: calc(100vh - 300px);
      // overflow-y: scroll;
      min-width: 140px;
      padding: 21px 0px 16px 0px;
      border-left: 1px solid #dddddd;
      .data-right-title {
        color: #111218;
        font-size: 14px;
        font-weight: 700;
        padding-bottom: 8px;
        padding: 0 16px;
        margin-bottom: 21px;
        > span {
          font-weight: 400;
        }
      }
      .checked-item-search{
        padding: 0 16px;
        .ant-input-search {
          // margin-top: 0;
          margin-bottom: 8px;
        }
      }
      // .ant-input-search {
      //   margin-top: 20px;
      // }
      .data-right-items {
        height: calc(100% - 82px);
        padding: 0 0 0 6px;
        overflow-y: scroll;
      }
      .data-right-li {
        font-size: 14px;
        color: #111218;
        display: flex;
        justify-content: space-between;
        height: 36px;
        align-items: center;
        padding: 0 10px;
        &:hover{
          background: #eef4fd;
          i{
            color: @highlightColor; 
          }
        }
        span{
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 100%;
        }
        i {
          color: rgba(17, 18, 24, 0.5);
          font-size: 16px;
          cursor: pointer;
        }
      }
    }
  }
  @media screen and (max-width: 866px) {
    .ant-modal{
      max-width: calc(100vw - 8px) !important;
      margin: unset;
    }
  }
}

/**
  导出中样式
*/
.data-export-ing {
  .ant-modal-body{
    padding: 24px 0;
  }
  .data-export-box{
    max-height: 449px;
    overflow-y: auto;
    padding: 0 24px 0 26px;
  }
  .data-export-complete,
  .data-export-undone {
    margin-bottom: 36px;
    margin-top: 4px;
    > h2 {
      font-size: 14px;
      font-weight: 700;
      color: rgba(17, 18, 24, 0.5);
    }
    .data-export-li {
      height: 76px;
      box-shadow: 0px 1px 0px 0px #eeeeee;
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0 15px 0 4px;
      align-items: center;
      .left{
        display: flex;
        flex: 1;
        .icon{
          width: 31px;
          height: 40px;
          margin-right: 16px;
        }
        .data-export-tex{
          >h4{
            color: #111218;
            font-size: 14px;
            font-weight: 700;
            margin: 0;
          }
          .size{
            font-size: 12px;
            color:  rgba(17, 18, 24, 0.5);
            margin-top: 4px;
          }
        }
      }
      .right{
        display: flex;
        align-items: center;
        .icon{
          color: #111218;
          font-size: 20px;
          margin-left: 16px;
          cursor: pointer;
          &.h-icon-all-reload-o{
            font-size: 16px;
          }
        }
      }

    }
  }
  .anticon svg{
    color: #2970FF;
  }

  .import-text{
    font-size: 14px;
    color: @highlightColor;
    line-height: 22px;
  }
}
</style>
<style lang="less" scoped>
@import './../../../../../application/src/components/pc/style/custom-themes';
/deep/.h3-organization-footer {
  padding: unset !important;
}

/deep/.ant-modal{
  padding: unset;
  min-width: 300px;
  //transform: translate(-50%, -50%);
}
/deep/.ant-modal-content{
  background: #FFFFFF;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}
/deep/.ant-modal-header{
  border-bottom: none;
  padding: 24px;
  .ant-modal-title{
    height: 24px;
    font-size: 16px;
    font-weight: 600;
    color: #111218;
    line-height: 24px;
  }
}
/deep/.ant-modal-close-x{
  width: 57px;
  height: 72px;
  line-height: 72px;
  svg{
    display: none;
  }
  // height: 54px;
  // width: 54px;
  line-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  &:hover{
    i{
      color: @highlightColor;
    }
  }
  i{
    display: inline-block;
    width: 16px;
    height: 16px;
    font-family: "aufontAll" !important;
    font-size: 17px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: rgba(17, 18, 24, 0.5);
    display: flex;
    align-items: center;
    &::after{
      content: "\e996";
    }
  }
}
/deep/.ant-modal-footer{
  border-top: none;
  padding: 24px;
  .ant-btn{
    width: 80px;
    height: 32px;
    border-radius: 2px;
    >span{
      height: 22px;
      font-size: 14px;
      color: #111218;
      line-height: 22px;
    }
    &:hover{
      border-color: #5291FF;
      >span{
        color: #5291FF
      }
    }
    &:active{
      border-color: #2970FF;
      >span{
        color: #2970FF
      }
    }
    &.ant-btn-primary{
      >span{
        color: rgba(255, 255, 255, 0.9);
      }
      &:hover{
        background: #5291FF;
        border-color: #5291FF;
        >span{
          color: rgba(255, 255, 255, 0.9);
        }
      }
      &:active{
        background: #1852D9;
        border-color: #1852D9;
        >span{
          color: rgba(255, 255, 255, 0.9);
        }
      }
    }
  }
}
/deep/.ant-modal-body{
  padding-top: 0;
  padding-bottom: 0;
}
</style>